<script>
export default {
  name: "my-Home",
};
</script>

<script setup>
import { reactive,ref } from "vue";

const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
const tableData = [
  {
    序号: '1',
    主题: '一周岁的小孩读好书',
    年龄: '一周岁',
  },
  {
    序号: '1',
    主题: '一周岁的小孩读好书',
    年龄: '一周岁',
  },
  {
    序号: "1",
    主题: "一周岁的小孩读好书",
    年龄: "一周岁",
    操作: "No. 189, Grove St, Los Angeles",
  },
  {
    序号: "1",
    主题: "一周岁的小孩读好书",
    年龄: "一周岁",
    操作: "No. 189, Grove St, Los Angeles",
  },
];

function addAction() {
  console.log('123');
}

const outerVisible = ref(false)
const innerVisible = ref(false)
const formInline = reactive({
  serial: '',//序号
  theme: '',//主题
  age:''//年龄
})

//取消按钮
function cancelDialog() {
  this.outerVisible = false
  this.formInline.serial = ''
  this.formInline.theme = ''
  this.formInline.age=''
}
</script>

<template>
  <div class="search">
    <span class="search-top">搜索</span>
    <el-form inline class="form">
      <el-form-item label="主题">
        <el-input v-model="form.name" size="small" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-select v-model="form.region" placeholder="不限" size="small">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
        <el-select v-model="form.region" placeholder="0周" size="small">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.name" size="small" />
      </el-form-item>
      <div>
        <el-button type="primary">搜索</el-button>
        <el-button type="primary" @click="addAction">添加阅读计划</el-button>
      </div>
    </el-form>
  </div>
  <div class="nav">
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="序号" label="序号" width="120" />
    <el-table-column prop="主题" label="主题" width="500" />
    <el-table-column prop="年龄" label="年龄" width="180" />
    <el-table-column prop="操作" label="操作">
      <template #default="scope">
        <el-button text @click="outerVisible = true" type="primary" >修改</el-button>
        <el-button
          size="small"
          type="danger"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  </div>
  <el-dialog v-model="outerVisible">
    <el-form-item label="序号">
      <el-input v-model="formInline.serial" placeholder="" clearable />
    </el-form-item>
    <el-form-item label="主题">
      <el-input v-model="formInline.theme" placeholder="" clearable />
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="formInline.age" placeholder="" clearable />
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="innerVisible ">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.search {
  height: 50px;
  width: 100%;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 10px 0 10px 10px;
  .search-top{
    font-size: 14px;
    color: #9d9696;
  }
  .form {
    display: flex;
  }
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
